<template>
  <div class="app-container">
    <u-page title="卡劵查询">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item prop="tranNo">
            <el-radio-group v-model="listQuery.type">
              <el-radio-button :label="1">发券订单号</el-radio-button>
              <el-radio-button :label="2">函云小票号</el-radio-button>
              <el-radio-button :label="3">发券流水号</el-radio-button>
              <el-radio-button :label="4">劵号</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="value">
            <el-input v-model="listQuery.value" placeholder="查询关键词" clearable style="width: 300px" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>

          <el-dropdown>
            <el-button type="primary">
              批量操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :disabled="selectData.length===0" @click.native="handleBatchCouponConsume">批量核销</el-dropdown-item>
              <el-dropdown-item :disabled="selectData.length===0" @click.native="handleBatchCouponCancel">批量作废</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form>
      </u-filtered>

      <u-table
        v-if="list.length>0"
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :page="false"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-dropdown>
                <el-button type="text">更多</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleOpenRecordList(row)">核销明细</el-dropdown-item>
                  <el-dropdown-item v-if="row.coupontype === 3 && row.status === 0" divided @click.native="handleCouponConsume2(row)">核销</el-dropdown-item>
                  <el-dropdown-item v-if="(row.coupontype === 0 || row.coupontype === 2) && row.status === 0" divided @click.native="handleCouponConsume(row)">核销</el-dropdown-item>
                  <el-dropdown-item v-if="row.status === 0" divided @click.native="handleCouponCancel(row)">作废</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </template>
      </u-table>

      <!-- 二维码 -->
      <div v-if="qrcodeModel">
        <el-row type="flex" style="padding: 10px 0; background-color: #f9fafc;">
          <el-col :span="6">
            <el-card style="width: 260px; margin-top: 20px;">
              <u-qrcode v-if="qrcode" :content="qrcode" width="200" height="200" />
              <div v-else style="text-align: center;">
                <el-image  :src="require('@/assets/img/notfound.png')" width="200" height="200" />
                <u-tip-info title="无法获取二维码"></u-tip-info>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <div style="width: 260px; margin-top: 20px; margin-left: 20px;">
              <el-button type="danger" icon="el-icon-delete" @click="handleCouponSendCancel">作废</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 总数显示 -->
      <u-pagination v-if="list.length>0" :total="list.length" layout="total" />
    </u-page>

    <!-- 优惠券核销 -->
    <coupon-consume v-model="dialogCouponConsumeVisible" :data="dataCouponQuery" card @change="hdlList" />

    <!-- 优惠券核销2 -->
    <coupon-consume2 v-model="dialogCouponConsume2Visible" :data="dataCouponQuery" card @change="hdlList" />

    <!-- 核销明细 -->
    <coupon-record v-model="dialogCouponRecordVisible" :data="dataCouponQuery" card @change="hdlList" />

    <!-- 优惠券作废 -->
    <coupon-cancel v-model="dialogCouponCancelVisible" :data="dataCouponQuery" card @change="hdlList" />

    <!-- 优惠券-发劵作废 -->
    <coupon-send-cancel v-model="dialogCouponSendCancelVisible" :data="dataCouponQuery" card @change="hdlList" />

    <!-- 【批量】优惠券作废 -->
    <batch-coupon-cancel v-model="dialogBatchCouponCancelVisible" :data="selectData" card @change="hdlList" />

    <!-- 【批量】优惠券核销 -->
    <batch-coupon-consume v-model="dialogBatchCouponConsumeVisible" :data="selectData" card @change="hdlList" />

  </div>
</template>

<script>
import CouponRecord from '../card/components/CouponRecord'
import CouponConsume from '../card/components/CouponConsume'
import CouponConsume2 from '../card/components/CouponConsume2'
import CouponCancel from '../card/components/CouponCancel'
import CouponSendCancel from '../card/components/CouponSendCancel'
import BatchCouponCancel from '../card/components/BatchCouponCancel'
import BatchCouponConsume from '../card/components/BatchCouponConsume'
export default {
  components: {
    CouponRecord,
    CouponConsume,
    CouponConsume2,
    CouponCancel,
    CouponSendCancel,
    BatchCouponCancel,
    BatchCouponConsume
  },
  data() {
    return {
      api: this.$u.api.MarketCouponCardsingle,
      listState: true,
      /** 新建卡包 **/
      dataForm: {},
      rules: {
        groupId: [
          { required: true, message: '请选择分组', trigger: 'change' }
        ],
        couponName: [
          { required: true, message: '卡包名称必填', trigger: 'blur' }
        ],
        couponId: [
          { required: true, message: '卡包id必填', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '限制张数必填', trigger: 'blur' }
        ]
      },
      // 分组列表
      group: [],
      /** 卡包管理 **/
      listQuery: {
        type: 1,
        value: ''
      },
      creatDate: [],
      disabledList: [
        {
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '正常'
        }, {
          value: '0',
          label: '禁用'
        }
      ],
      textMap: {
        update: '编辑卡包',
        create: '新增卡包'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      // 表格
      columns: [
        {
          prop: 'couponno',
          label: '劵号',
          width: '160'
        },
        {
          prop: 'coupontype',
          label: '类型',
          width: '100',
          render: (h, params) => {
            const { coupontypename } = params.row
            return h('el-tag', { props: { effect: 'plain' }}, coupontypename)
          }
        },
        {
          prop: 'couponname',
          label: '名称',
          width: '150',
          render: (h, params) => {
            return h('el-tag', { props: { effect: 'plain' }}, params.row.couponname)
          }
        },
        {
          prop: 'validitybegindate',
          label: '有效期日期',
          width: '180',
          render: (h, params) => {
            let { validitybegindate, validityenddate } = params.row
            if (!validitybegindate) {
              validitybegindate = '不限制'
            }
            if (!validityenddate) {
              validityenddate = '不限制'
            }
            return [
              h('el-tag', { props: { effect: 'plain' }}, '起始:' + validitybegindate),
              h('br'),
              h('el-tag', { props: { effect: 'plain' }}, '终止:' + validityenddate)
            ]
          }
        },
        {
          prop: 'balance',
          label: '金额/次数',
          render: (h, params) => {
            const { balance, coupontype } = params.row
            const unit = coupontype === 2 ? '次' : '元'
            return h('span', { style: { fontWeight: 'bold', color: '#4CAF50 !important' }}, balance + unit)
          }
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            const { status, statusname } = params.row
            if (status === -1) {
              return h('el-tag', { props: { type: 'warning' }}, statusname)
            }
            if (status === 0) {
              return h('el-tag', { props: { type: 'success' }}, statusname)
            }
            if (status === 2) {
              return h('el-tag', { props: { type: 'info' }}, statusname)
            }
            if (status === 3) {
              return h('el-tag', { props: { type: 'danger' }}, statusname)
            }
            return h('el-tag', statusname)
          }
        },
        {
          prop: 'limit',
          label: '限制',
          width: '120',
          render: (h, params) => {
            const { coupontype, usableamount, usablemaxnum } = params.row
            if (coupontype === 3) {
              return [
                h('el-tag', { props: { effect: 'plain' }}, '满减金额:' + usableamount),
                h('br'),
                h('el-tag', { props: { effect: 'plain' }}, '最高叠加张数:' + usablemaxnum)
              ]
            }
          }
        },
        {
          prop: 'instruction',
          label: '备注'
        }
      ],
      listLoading: false,
      list: [],
      openid: '',
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      send: false,
      qrcodeModel: false,
      qrcode: '',
      dataCouponQuery: {},
      // 优惠券核销
      dialogCouponConsumeVisible: false,
      // 优惠券核销2
      dialogCouponConsume2Visible: false,
      // 核销明细
      dialogCouponRecordVisible: false,
      // 优惠券作废
      dialogCouponCancelVisible: false,
      // 优惠券发劵作废
      dialogCouponSendCancelVisible: false,
      // 批量优惠券作废
      dialogBatchCouponCancelVisible: false,
      // 批量优惠券核销
      dialogBatchCouponConsumeVisible: false
    }
  },
  methods: {
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      // 查询列表数据
      self.api.list(self.listQuery).then(res => {
        const { couponList, send, qrcode } = res.data
        // 获取列表数据
        self.list = couponList
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)

        this.send = send
        this.qrcode = qrcode

        this.qrcodeModel = false
        if (!send) {
          // 开启二维码模式
          this.qrcodeModel = true
          // 获取数据
          this.dataCouponQuery = res.data
        }
      })
    },
    // 优惠券核销
    handleCouponConsume(row) {
      this.dataCouponQuery = row
      this.dialogCouponConsumeVisible = true
    },
    // 核销明细
    handleOpenRecordList(row) {
      this.dataCouponQuery = row
      this.dialogCouponRecordVisible = true
    },
    // 优惠券核销2
    handleCouponConsume2(row) {
      this.dataCouponQuery = row
      this.dialogCouponConsume2Visible = true
    },
    // 优惠券作废
    handleCouponCancel(row) {
      this.dataCouponQuery = row
      this.dialogCouponCancelVisible = true
    },
    // 优惠券发劵作废
    handleCouponSendCancel() {
      this.dialogCouponSendCancelVisible = true
    },
    // 【批量】优惠券作废
    handleBatchCouponCancel() {
      this.dialogBatchCouponCancelVisible = true
    },
    // 【批量】优惠券作废
    handleBatchCouponConsume() {
      this.dialogBatchCouponConsumeVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .disabled {
    ::v-deep{
      .el-input{
        width: 140px;
      }
    }
  }
}
/* 表单label 左对齐*/
::v-deep .left-align-show .el-form-item__label::before{
  content: "*";
  color: #ff4949;
  margin-right: 4px;
}
/* 表单label 左对齐*/
::v-deep .left-align-hide .el-form-item__label::before{
  content: "*";
  color: transparent;
  margin-right: 4px;
}
</style>

